<template>
  <view class="content">
    <city-select v-model="show" @city-change="cityChange"></city-select>
    <view class="form-section">
      <view class="form-item">
        <text class="label">联系人</text>
      <input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名"
             placeholder-class="placeholder"/>
    </view>
      <view class="form-item">
        <text class="label">手机号</text>
      <input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码"
             placeholder-class="placeholder"/>
    </view>
      <view class="form-item">
        <text class="label">区域</text>
        <view @click="show = true" class="region-selector">
          <text class="region-text">{{ addressData.region.replace(/,/g, '') || '请选择所在地区' }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="form-item">
        <text class="label">地址</text>
      <input class="input" type="text" v-model="addressData.address" placeholder="详细地址"
             placeholder-class="placeholder"/>
      </view>
    </view>

    <view class="default-section">
      <view class="default-item">
        <text class="label">设为默认</text>
        <up-switch v-model="addressData.isDefault" :active-value="1" :inactive-value="0" color="#e84d1c"/>
      </view>
    </view>
    
    <button class="submit-btn" @click="confirm">提交</button>
  </view>
</template>

<script>
import citySelect from "@/pages_template/pages/citySelect/u-city-select.vue";
import {addAddress, getAddress, updateAddress} from "@/api/sell/address";

export default {
  components: {
    citySelect
  },
  data() {
    return {
      show: false,
      addressData: {
        region: '',
        name: '',
        mobile: '',
        address: '',
        isDefault: 0
      }
    }
  },
  onLoad(option) {
    let title = '新增收货地址';
    if (option.type === 'edit') {
      title = '编辑收货地址'

      getAddress(option.id).then(res => {
        this.addressData = res.data;
      });
    }
    this.manageType = option.type;
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    cityChange(e) {
      this.addressData.region = e.province.label + ',' + e.city.label + ',' + e.area.label;
    },

    //地图选择地址
    chooseLocation() {
      uni.chooseLocation({
        success: (data) => {
          this.addressData.addressName = data.name;
          this.addressData.address = data.name;
        }
      })
    },

    //提交
    confirm() {
      let data = this.addressData;
      if (!data.name) {
        this.$modal.msgError('姓名不能为空');
        return;
      }
      if (!data.mobile) {
        this.$modal.msgError('手机号不能为空');
        return;
      }
      if (!data.region) {
        this.$modal.msgError('地区不能为空');
        return;
      }
      if (!data.address) {
        this.$modal.msgError('地址不能为空');
        return;
      }
      if (!/(^1[3-9][0-9]{9}$)/.test(data.mobile)) {
        this.$modal.msgError('手机号格式错误');
        return;
      }
      if (this.manageType === 'add') {
        addAddress(data).then(res => {
          uni.navigateBack({delta: 1})
          this.$modal.msgError('保存成功');
        })
      } else {
        updateAddress(data).then(res => {
          uni.navigateBack({delta: 1})
          this.$modal.msgError('保存成功');
        })
      }

    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
  padding-bottom: 120rpx;
}

.content {
  padding: 20rpx;
}

.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.form-item {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }

  .label {
    width: 140rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }

  .input {
    flex: 1;
    height: 100rpx;
    font-size: 28rpx;
    color: #333;
  }

  .placeholder {
    color: #999;
    font-size: 28rpx;
}

  .region-selector {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    
    .region-text {
      font-size: 28rpx;
      color: #333;
      
      &:empty::before {
        content: '请选择所在地区';
        color: #999;
      }
    }
  }
}

.default-section {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 60rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  
  .default-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    
    .label {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.submit-btn {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 20rpx;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690rpx;
  height: 88rpx;
  font-size: 32rpx;
  color: #fff;
  background: linear-gradient(90deg, #e84d1c, #f06e44);
  border-radius: 44rpx;
  box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.3);
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
  }
}
</style>
